<template>
  <div 
   v-for="i in btndetail"
   :key="i.id"
   :style="{backgroundImage:`url(${i.status?i.selsrc:i.norsrc})`}"
   :class="elclass"
   @click="change(i.id)"
   ></div>
</template>

<script>
import { reactive, toRef, toRefs } from '@vue/reactivity'
export default {
    props:{
        btnnum:{
            require:true,
            type:Number
        },
        imglist:{
            require:true,
            type:Array
        },
        class:String
    },
    emits:["switch"],
    setup(props,context){
        const {btnnum,imglist} = toRefs(props)
        const elclass = toRef(props,"class")
        const btndetail= reactive([])
        for(let i =0;i<btnnum.value;i++){
            btndetail.push({
                id:i,
                selsrc:imglist.value[i],
                norsrc:imglist.value[i+btnnum.value],
                status:i===0?true:false
            })
        }
       const change=(i)=>{
           context.emit("switch",i)
           btndetail.forEach((el)=>{
            if(el.id==i){
                el.status = true
            }else{
                el.status =false
            }
        })
       }



        
        
      
      




        return {
            btndetail,
            imglist,
            elclass,
            change
        }
    }
}
</script>

<style>

</style>